<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Matrix4 - Three.js Docs</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<script src="../scripts/highlight.min.js"></script>
	<link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
	<link type="text/css" rel="stylesheet" href="../styles/page.css">
</head>
<body>
	<h1 translate="no">Matrix4</h1>
		<section>
			<header>
				<div class="class-description"><p>Represents a 4x4 matrix.</p>
<p>The most common use of a 4x4 matrix in 3D computer graphics is as a transformation matrix.
For an introduction to transformation matrices as used in WebGL, check out <a href="https://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices" target="_blank" rel="noopener">this tutorial</a></p>
<p>This allows a 3D vector representing a point in 3D space to undergo
transformations such as translation, rotation, shear, scale, reflection,
orthogonal or perspective projection and so on, by being multiplied by the
matrix. This is known as <code>applying</code> the matrix to the vector.</p>
<p>A Note on Row-Major and Column-Major Ordering:</p>
<p>The constructor and <a href="Matrix3.html#set">Matrix3#set</a> method take arguments in
<a href="https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order" target="_blank" rel="noopener">row-major</a>
order, while internally they are stored in the <a href="Matrix3.html#elements">Matrix3#elements</a> array in column-major order.
This means that calling:</p>
<p>will result in the elements array containing:</p>
<pre><code class="language-js">m.elements = [ 11, 21, 31, 41,
               12, 22, 32, 42,
               13, 23, 33, 43,
               14, 24, 34, 44 ];
</code></pre>
<p>and internally all calculations are performed using column-major ordering.
However, as the actual ordering makes no difference mathematically and
most people are used to thinking about matrices in row-major order, the
three.js documentation shows matrices in row-major order. Just bear in
mind that if you are reading the source code, you'll have to take the
transpose of any matrices outlined here to make sense of the calculations.</p></div>
				<h2>Code Example</h2>
				<div translate="no"><pre><code class="language-js">const m = new THREE.Matrix4();
m.set( 11, 12, 13, 14,
       21, 22, 23, 24,
       31, 32, 33, 34,
       41, 42, 43, 44 );
</code></pre></div>
			</header>
			<article>
				<div class="container-overview">
					<h2>Constructor</h2>
					<h3 class="name name-method" id="Matrix4" translate="no">new <a href="#Matrix4">Matrix4</a><span class="signature">( n11 : <span class="param-type">number</span>, n12 : <span class="param-type">number</span>, n13 : <span class="param-type">number</span>, n14 : <span class="param-type">number</span>, n21 : <span class="param-type">number</span>, n22 : <span class="param-type">number</span>, n23 : <span class="param-type">number</span>, n24 : <span class="param-type">number</span>, n31 : <span class="param-type">number</span>, n32 : <span class="param-type">number</span>, n33 : <span class="param-type">number</span>, n34 : <span class="param-type">number</span>, n41 : <span class="param-type">number</span>, n42 : <span class="param-type">number</span>, n43 : <span class="param-type">number</span>, n44 : <span class="param-type">number</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Constructs a new 4x4 matrix. The arguments are supposed to be
in row-major order. If no arguments are provided, the constructor
initializes the matrix as an identity matrix.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>n11</strong>
									</td>
									<td class="description last">
										<p>1-1 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n12</strong>
									</td>
									<td class="description last">
										<p>1-2 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n13</strong>
									</td>
									<td class="description last">
										<p>1-3 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n14</strong>
									</td>
									<td class="description last">
										<p>1-4 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n21</strong>
									</td>
									<td class="description last">
										<p>2-1 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n22</strong>
									</td>
									<td class="description last">
										<p>2-2 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n23</strong>
									</td>
									<td class="description last">
										<p>2-3 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n24</strong>
									</td>
									<td class="description last">
										<p>2-4 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n31</strong>
									</td>
									<td class="description last">
										<p>3-1 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n32</strong>
									</td>
									<td class="description last">
										<p>3-2 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n33</strong>
									</td>
									<td class="description last">
										<p>3-3 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n34</strong>
									</td>
									<td class="description last">
										<p>3-4 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n41</strong>
									</td>
									<td class="description last">
										<p>4-1 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n42</strong>
									</td>
									<td class="description last">
										<p>4-2 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n43</strong>
									</td>
									<td class="description last">
										<p>4-3 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n44</strong>
									</td>
									<td class="description last">
										<p>4-4 matrix element.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<h2 class="subsection-title">Properties</h2>
				<div class="member">
					<h3 class="name" id="elements" translate="no">.<a href="#elements">elements</a><span class="type-signature"> : Array.&lt;number></span> </h3>
					<div class="description">
						<p>A column-major list of matrix values.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="isMatrix4" translate="no">.<a href="#isMatrix4">isMatrix4</a><span class="type-signature"> : boolean</span> <span class="type-signature">(readonly) </span></h3>
					<div class="description">
						<p>This flag can be used for type testing.</p>
						<p>Default is <code>true</code>.</p>
					</div>
				</div>
				<h2 class="subsection-title">Methods</h2>
					<h3 class="name name-method" id="clone" translate="no">.<a href="#clone">clone</a><span class="signature">()</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Returns a matrix with copied values from this instance.</p>
						</div>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A clone of this instance.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="compose" translate="no">.<a href="#compose">compose</a><span class="signature">( position : <span class="param-type"><a href="Vector3.html">Vector3</a></span>, quaternion : <span class="param-type"><a href="Quaternion.html">Quaternion</a></span>, scale : <span class="param-type"><a href="Vector3.html">Vector3</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets this matrix to the transformation composed of the given position,
rotation (Quaternion) and scale.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>position</strong>
									</td>
									<td class="description last">
										<p>The position vector.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>quaternion</strong>
									</td>
									<td class="description last">
										<p>The rotation as a Quaternion.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>scale</strong>
									</td>
									<td class="description last">
										<p>The scale vector.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="copy" translate="no">.<a href="#copy">copy</a><span class="signature">( m : <span class="param-type"><a href="Matrix4.html">Matrix4</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Copies the values of the given matrix to this instance.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>m</strong>
									</td>
									<td class="description last">
										<p>The matrix to copy.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="copyPosition" translate="no">.<a href="#copyPosition">copyPosition</a><span class="signature">( m : <span class="param-type"><a href="Matrix4.html">Matrix4</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Copies the translation component of the given matrix
into this matrix's translation component.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>m</strong>
									</td>
									<td class="description last">
										<p>The matrix to copy the translation component.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="decompose" translate="no">.<a href="#decompose">decompose</a><span class="signature">( position : <span class="param-type"><a href="Vector3.html">Vector3</a></span>, quaternion : <span class="param-type"><a href="Quaternion.html">Quaternion</a></span>, scale : <span class="param-type"><a href="Vector3.html">Vector3</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Decomposes this matrix into its position, rotation and scale components
and provides the result in the given objects.</p>
<p>Note: Not all matrices are decomposable in this way. For example, if an
object has a non-uniformly scaled parent, then the object's world matrix
may not be decomposable, and this method may not be appropriate.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>position</strong>
									</td>
									<td class="description last">
										<p>The position vector.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>quaternion</strong>
									</td>
									<td class="description last">
										<p>The rotation as a Quaternion.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>scale</strong>
									</td>
									<td class="description last">
										<p>The scale vector.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="determinant" translate="no">.<a href="#determinant">determinant</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
					<div class="method">
						<div class="description">
							<p>Computes and returns the determinant of this matrix.</p>
<p>Based on the method outlined <a href="http://www.euclideanspace.com/maths/algebra/matrix/functions/inverse/fourD/index.html" target="_blank" rel="noopener">here</a>.</p>
						</div>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> The determinant.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="equals" translate="no">.<a href="#equals">equals</a><span class="signature">( matrix : <span class="param-type"><a href="Matrix4.html">Matrix4</a></span> )</span><span class="type-signature"> : boolean</span> </h3>
					<div class="method">
						<div class="description">
							<p>Returns <code>true</code> if this matrix is equal with the given one.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>matrix</strong>
									</td>
									<td class="description last">
										<p>The matrix to test for equality.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> Whether this matrix is equal with the given one.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="extractBasis" translate="no">.<a href="#extractBasis">extractBasis</a><span class="signature">( xAxis : <span class="param-type"><a href="Vector3.html">Vector3</a></span>, yAxis : <span class="param-type"><a href="Vector3.html">Vector3</a></span>, zAxis : <span class="param-type"><a href="Vector3.html">Vector3</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Extracts the basis of this matrix into the three axis vectors provided.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>xAxis</strong>
									</td>
									<td class="description last">
										<p>The basis's x axis.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>yAxis</strong>
									</td>
									<td class="description last">
										<p>The basis's y axis.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>zAxis</strong>
									</td>
									<td class="description last">
										<p>The basis's z axis.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="extractRotation" translate="no">.<a href="#extractRotation">extractRotation</a><span class="signature">( m : <span class="param-type"><a href="Matrix4.html">Matrix4</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Extracts the rotation component of the given matrix
into this matrix's rotation component.</p>
<p>Note: This method does not support reflection matrices.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>m</strong>
									</td>
									<td class="description last">
										<p>The matrix.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="fromArray" translate="no">.<a href="#fromArray">fromArray</a><span class="signature">( array : <span class="param-type">Array.&lt;number></span>, offset : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets the elements of the matrix from the given array.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>array</strong>
									</td>
									<td class="description last">
										<p>The matrix elements in column-major order.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>offset</strong>
									</td>
									<td class="description last">
										<p>Index of the first element in the array.</p>
										<p>Default is <code>0</code>.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="getMaxScaleOnAxis" translate="no">.<a href="#getMaxScaleOnAxis">getMaxScaleOnAxis</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
					<div class="method">
						<div class="description">
							<p>Gets the maximum scale value of the three axes.</p>
						</div>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> The maximum scale.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="identity" translate="no">.<a href="#identity">identity</a><span class="signature">()</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets this matrix to the 4x4 identity matrix.</p>
						</div>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="invert" translate="no">.<a href="#invert">invert</a><span class="signature">()</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Inverts this matrix, using the <a href="https://en.wikipedia.org/wiki/Invertible_matrix#Analytic_solution" target="_blank" rel="noopener">analytic method</a>.
You can not invert with a determinant of zero. If you attempt this, the method produces
a zero matrix instead.</p>
						</div>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="lookAt" translate="no">.<a href="#lookAt">lookAt</a><span class="signature">( eye : <span class="param-type"><a href="Vector3.html">Vector3</a></span>, target : <span class="param-type"><a href="Vector3.html">Vector3</a></span>, up : <span class="param-type"><a href="Vector3.html">Vector3</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets the rotation component of the transformation matrix, looking from <code>eye</code> towards
<code>target</code>, and oriented by the up-direction.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>eye</strong>
									</td>
									<td class="description last">
										<p>The eye vector.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>target</strong>
									</td>
									<td class="description last">
										<p>The target vector.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>up</strong>
									</td>
									<td class="description last">
										<p>The up vector.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="makeBasis" translate="no">.<a href="#makeBasis">makeBasis</a><span class="signature">( xAxis : <span class="param-type"><a href="Vector3.html">Vector3</a></span>, yAxis : <span class="param-type"><a href="Vector3.html">Vector3</a></span>, zAxis : <span class="param-type"><a href="Vector3.html">Vector3</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets the given basis vectors to this matrix.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>xAxis</strong>
									</td>
									<td class="description last">
										<p>The basis's x axis.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>yAxis</strong>
									</td>
									<td class="description last">
										<p>The basis's y axis.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>zAxis</strong>
									</td>
									<td class="description last">
										<p>The basis's z axis.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="makeOrthographic" translate="no">.<a href="#makeOrthographic">makeOrthographic</a><span class="signature">( left : <span class="param-type">number</span>, right : <span class="param-type">number</span>, top : <span class="param-type">number</span>, bottom : <span class="param-type">number</span>, near : <span class="param-type">number</span>, far : <span class="param-type">number</span>, coordinateSystem : <span class="param-type"><a href="global.html#WebGLCoordinateSystem">WebGLCoordinateSystem</a> | <a href="global.html#WebGPUCoordinateSystem">WebGPUCoordinateSystem</a></span>, reversedDepth : <span class="param-type">boolean</span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Creates a orthographic projection matrix. This is used internally by
<a href="OrthographicCamera.html#updateProjectionMatrix">OrthographicCamera#updateProjectionMatrix</a>.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>left</strong>
									</td>
									<td class="description last">
										<p>Left boundary of the viewing frustum at the near plane.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>right</strong>
									</td>
									<td class="description last">
										<p>Right boundary of the viewing frustum at the near plane.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>top</strong>
									</td>
									<td class="description last">
										<p>Top boundary of the viewing frustum at the near plane.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>bottom</strong>
									</td>
									<td class="description last">
										<p>Bottom boundary of the viewing frustum at the near plane.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>near</strong>
									</td>
									<td class="description last">
										<p>The distance from the camera to the near plane.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>far</strong>
									</td>
									<td class="description last">
										<p>The distance from the camera to the far plane.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>coordinateSystem</strong>
									</td>
									<td class="description last">
										<p>The coordinate system.</p>
										<p>Default is <code>WebGLCoordinateSystem</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>reversedDepth</strong>
									</td>
									<td class="description last">
										<p>Whether to use a reversed depth.</p>
										<p>Default is <code>false</code>.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="makePerspective" translate="no">.<a href="#makePerspective">makePerspective</a><span class="signature">( left : <span class="param-type">number</span>, right : <span class="param-type">number</span>, top : <span class="param-type">number</span>, bottom : <span class="param-type">number</span>, near : <span class="param-type">number</span>, far : <span class="param-type">number</span>, coordinateSystem : <span class="param-type"><a href="global.html#WebGLCoordinateSystem">WebGLCoordinateSystem</a> | <a href="global.html#WebGPUCoordinateSystem">WebGPUCoordinateSystem</a></span>, reversedDepth : <span class="param-type">boolean</span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Creates a perspective projection matrix. This is used internally by
<a href="PerspectiveCamera.html#updateProjectionMatrix">PerspectiveCamera#updateProjectionMatrix</a>.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>left</strong>
									</td>
									<td class="description last">
										<p>Left boundary of the viewing frustum at the near plane.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>right</strong>
									</td>
									<td class="description last">
										<p>Right boundary of the viewing frustum at the near plane.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>top</strong>
									</td>
									<td class="description last">
										<p>Top boundary of the viewing frustum at the near plane.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>bottom</strong>
									</td>
									<td class="description last">
										<p>Bottom boundary of the viewing frustum at the near plane.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>near</strong>
									</td>
									<td class="description last">
										<p>The distance from the camera to the near plane.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>far</strong>
									</td>
									<td class="description last">
										<p>The distance from the camera to the far plane.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>coordinateSystem</strong>
									</td>
									<td class="description last">
										<p>The coordinate system.</p>
										<p>Default is <code>WebGLCoordinateSystem</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>reversedDepth</strong>
									</td>
									<td class="description last">
										<p>Whether to use a reversed depth.</p>
										<p>Default is <code>false</code>.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="makeRotationAxis" translate="no">.<a href="#makeRotationAxis">makeRotationAxis</a><span class="signature">( axis : <span class="param-type"><a href="Vector3.html">Vector3</a></span>, angle : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets this matrix as a rotational transformation around the given axis by
the given angle.</p>
<p>This is a somewhat controversial but mathematically sound alternative to
rotating via Quaternions. See the discussion <a href="https://www.gamedev.net/articles/programming/math-and-physics/do-we-really-need-quaternions-r1199" target="_blank" rel="noopener">here</a>.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>axis</strong>
									</td>
									<td class="description last">
										<p>The normalized rotation axis.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>angle</strong>
									</td>
									<td class="description last">
										<p>The rotation in radians.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="makeRotationFromEuler" translate="no">.<a href="#makeRotationFromEuler">makeRotationFromEuler</a><span class="signature">( euler : <span class="param-type"><a href="Euler.html">Euler</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets the rotation component (the upper left 3x3 matrix) of this matrix to
the rotation specified by the given Euler angles. The rest of
the matrix is set to the identity. Depending on the <a href="Euler.html#order">Euler#order</a>,
there are six possible outcomes. See <a href="https://en.wikipedia.org/wiki/Euler_angles#Rotation_matrix" target="_blank" rel="noopener">this page</a>
for a complete list.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>euler</strong>
									</td>
									<td class="description last">
										<p>The Euler angles.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="makeRotationFromQuaternion" translate="no">.<a href="#makeRotationFromQuaternion">makeRotationFromQuaternion</a><span class="signature">( q : <span class="param-type"><a href="Quaternion.html">Quaternion</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets the rotation component of this matrix to the rotation specified by
the given Quaternion as outlined <a href="https://en.wikipedia.org/wiki/Rotation_matrix#Quaternion" target="_blank" rel="noopener">here</a>
The rest of the matrix is set to the identity.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>q</strong>
									</td>
									<td class="description last">
										<p>The Quaternion.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="makeRotationX" translate="no">.<a href="#makeRotationX">makeRotationX</a><span class="signature">( theta : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets this matrix as a rotational transformation around the X axis by
the given angle.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>theta</strong>
									</td>
									<td class="description last">
										<p>The rotation in radians.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="makeRotationY" translate="no">.<a href="#makeRotationY">makeRotationY</a><span class="signature">( theta : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets this matrix as a rotational transformation around the Y axis by
the given angle.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>theta</strong>
									</td>
									<td class="description last">
										<p>The rotation in radians.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="makeRotationZ" translate="no">.<a href="#makeRotationZ">makeRotationZ</a><span class="signature">( theta : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets this matrix as a rotational transformation around the Z axis by
the given angle.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>theta</strong>
									</td>
									<td class="description last">
										<p>The rotation in radians.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="makeScale" translate="no">.<a href="#makeScale">makeScale</a><span class="signature">( x : <span class="param-type">number</span>, y : <span class="param-type">number</span>, z : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets this matrix as a scale transformation.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>x</strong>
									</td>
									<td class="description last">
										<p>The amount to scale in the X axis.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>y</strong>
									</td>
									<td class="description last">
										<p>The amount to scale in the Y axis.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>z</strong>
									</td>
									<td class="description last">
										<p>The amount to scale in the Z axis.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="makeShear" translate="no">.<a href="#makeShear">makeShear</a><span class="signature">( xy : <span class="param-type">number</span>, xz : <span class="param-type">number</span>, yx : <span class="param-type">number</span>, yz : <span class="param-type">number</span>, zx : <span class="param-type">number</span>, zy : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets this matrix as a shear transformation.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>xy</strong>
									</td>
									<td class="description last">
										<p>The amount to shear X by Y.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>xz</strong>
									</td>
									<td class="description last">
										<p>The amount to shear X by Z.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>yx</strong>
									</td>
									<td class="description last">
										<p>The amount to shear Y by X.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>yz</strong>
									</td>
									<td class="description last">
										<p>The amount to shear Y by Z.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>zx</strong>
									</td>
									<td class="description last">
										<p>The amount to shear Z by X.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>zy</strong>
									</td>
									<td class="description last">
										<p>The amount to shear Z by Y.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="makeTranslation" translate="no">.<a href="#makeTranslation">makeTranslation</a><span class="signature">( x : <span class="param-type">number | <a href="Vector3.html">Vector3</a></span>, y : <span class="param-type">number</span>, z : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets this matrix as a translation transform from the given vector.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>x</strong>
									</td>
									<td class="description last">
										<p>The amount to translate in the X axis or alternatively a translation vector.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>y</strong>
									</td>
									<td class="description last">
										<p>The amount to translate in the Y axis.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>z</strong>
									</td>
									<td class="description last">
										<p>The amount to translate in the z axis.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="multiply" translate="no">.<a href="#multiply">multiply</a><span class="signature">( m : <span class="param-type"><a href="Matrix4.html">Matrix4</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Post-multiplies this matrix by the given 4x4 matrix.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>m</strong>
									</td>
									<td class="description last">
										<p>The matrix to multiply with.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="multiplyMatrices" translate="no">.<a href="#multiplyMatrices">multiplyMatrices</a><span class="signature">( a : <span class="param-type"><a href="Matrix4.html">Matrix4</a></span>, b : <span class="param-type"><a href="Matrix4.html">Matrix4</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Multiples the given 4x4 matrices and stores the result
in this matrix.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>a</strong>
									</td>
									<td class="description last">
										<p>The first matrix.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>b</strong>
									</td>
									<td class="description last">
										<p>The second matrix.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="multiplyScalar" translate="no">.<a href="#multiplyScalar">multiplyScalar</a><span class="signature">( s : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Multiplies every component of the matrix by the given scalar.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>s</strong>
									</td>
									<td class="description last">
										<p>The scalar.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="premultiply" translate="no">.<a href="#premultiply">premultiply</a><span class="signature">( m : <span class="param-type"><a href="Matrix4.html">Matrix4</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Pre-multiplies this matrix by the given 4x4 matrix.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>m</strong>
									</td>
									<td class="description last">
										<p>The matrix to multiply with.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="scale" translate="no">.<a href="#scale">scale</a><span class="signature">( v : <span class="param-type"><a href="Vector3.html">Vector3</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Multiplies the columns of this matrix by the given vector.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>v</strong>
									</td>
									<td class="description last">
										<p>The scale vector.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="set" translate="no">.<a href="#set">set</a><span class="signature">( n11 : <span class="param-type">number</span>, n12 : <span class="param-type">number</span>, n13 : <span class="param-type">number</span>, n14 : <span class="param-type">number</span>, n21 : <span class="param-type">number</span>, n22 : <span class="param-type">number</span>, n23 : <span class="param-type">number</span>, n24 : <span class="param-type">number</span>, n31 : <span class="param-type">number</span>, n32 : <span class="param-type">number</span>, n33 : <span class="param-type">number</span>, n34 : <span class="param-type">number</span>, n41 : <span class="param-type">number</span>, n42 : <span class="param-type">number</span>, n43 : <span class="param-type">number</span>, n44 : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets the elements of the matrix.The arguments are supposed to be
in row-major order.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>n11</strong>
									</td>
									<td class="description last">
										<p>1-1 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n12</strong>
									</td>
									<td class="description last">
										<p>1-2 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n13</strong>
									</td>
									<td class="description last">
										<p>1-3 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n14</strong>
									</td>
									<td class="description last">
										<p>1-4 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n21</strong>
									</td>
									<td class="description last">
										<p>2-1 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n22</strong>
									</td>
									<td class="description last">
										<p>2-2 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n23</strong>
									</td>
									<td class="description last">
										<p>2-3 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n24</strong>
									</td>
									<td class="description last">
										<p>2-4 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n31</strong>
									</td>
									<td class="description last">
										<p>3-1 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n32</strong>
									</td>
									<td class="description last">
										<p>3-2 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n33</strong>
									</td>
									<td class="description last">
										<p>3-3 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n34</strong>
									</td>
									<td class="description last">
										<p>3-4 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n41</strong>
									</td>
									<td class="description last">
										<p>4-1 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n42</strong>
									</td>
									<td class="description last">
										<p>4-2 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n43</strong>
									</td>
									<td class="description last">
										<p>4-3 matrix element.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>n44</strong>
									</td>
									<td class="description last">
										<p>4-4 matrix element.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="setFromMatrix3" translate="no">.<a href="#setFromMatrix3">setFromMatrix3</a><span class="signature">( m : <span class="param-type"><a href="Matrix3.html">Matrix3</a></span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Set the upper 3x3 elements of this matrix to the values of given 3x3 matrix.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>m</strong>
									</td>
									<td class="description last">
										<p>The 3x3 matrix.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="setPosition" translate="no">.<a href="#setPosition">setPosition</a><span class="signature">( x : <span class="param-type">number | <a href="Vector3.html">Vector3</a></span>, y : <span class="param-type">number</span>, z : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets the position component for this matrix from the given vector,
without affecting the rest of the matrix.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>x</strong>
									</td>
									<td class="description last">
										<p>The x component of the vector or alternatively the vector object.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>y</strong>
									</td>
									<td class="description last">
										<p>The y component of the vector.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>z</strong>
									</td>
									<td class="description last">
										<p>The z component of the vector.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="toArray" translate="no">.<a href="#toArray">toArray</a><span class="signature">( array : <span class="param-type">Array.&lt;number></span>, offset : <span class="param-type">number</span> )</span><span class="type-signature"> : Array.&lt;number></span> </h3>
					<div class="method">
						<div class="description">
							<p>Writes the elements of this matrix to the given array. If no array is provided,
the method returns a new instance.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>array</strong>
									</td>
									<td class="description last">
										<p>The target array holding the matrix elements in column-major order.</p>
										<p>Default is <code>[]</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>offset</strong>
									</td>
									<td class="description last">
										<p>Index of the first element in the array.</p>
										<p>Default is <code>0</code>.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> The matrix elements in column-major order.</dt>
						</dl>
					</div>
					<h3 class="name name-method" id="transpose" translate="no">.<a href="#transpose">transpose</a><span class="signature">()</span><span class="type-signature"> : <a href="Matrix4.html">Matrix4</a></span> </h3>
					<div class="method">
						<div class="description">
							<p>Transposes this matrix in place.</p>
						</div>
						<dl class="details">
							<dt class="tag-returns"><strong>Returns:</strong> A reference to this matrix.</dt>
						</dl>
					</div>
				<h2 class="subsection-title">Source</h2>
				<p>
					<a href="https://github.com/mrdoob/three.js/blob/master/src/math/Matrix4.js" translate="no" target="_blank" rel="noopener">src/math/Matrix4.js</a>
				</p>
			</article>
		</section>
<script src="../scripts/linenumber.js"></script>
<script src="../scripts/page.js"></script>
</body>
</html>